<template>
  <div>
    <el-image
        v-if="isImage"
        :preview-teleported="true"
        fit="cover"
        :src="src"
        title="点击查看大图"
        :preview-src-list="[src]"
        style="width: 1280px;height: 720px;"
    />
    <video-player
        v-else-if="isVideo"
        :width="1280"
        :height="720"
        ref="videoPlayer"
        :options="videoPlayerOptions"
    ></video-player>
    <audio ref="audio" controls v-else-if="isVoice" style="width: 100%">
      <source :src="src" type="audio/mp3">
    </audio>
    <el-link  v-else type="primary" :href="src" target="_blank">当前文件无法预览，点击下载！</el-link>
  </div>
</template>

<script>
export default {
  name: 'index',
  props:["src"],
  data(){
    return {
      videoPlayerOptions: {
        autoplay: false, // 自动播放
        muted: false, // 静音
        fluid: true, // 自适应播放容器
        language: 'zh-CN', // 中文提示
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 倍速播放
        sources: [
        ],
      },
    }
  },
  created() {
    console.log(this.src)
    if (this.isVideo){
      this.videoPlayerOptions.sources.push({
        type: 'video/mp4', // 播放视频类型 mp4
        src: this.src // 播放视频链接
      })
    }
  },
  computed:{
    isImage() {
      return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(this.src);
    },
    isVideo() {
      return /\.(mp4|webm)$/i.test(this.src);
    },
    isVoice(){
      return /\.(mp3|wav|acc)$/i.test(this.src);
    }
  },
  methods: {
  },
}
</script>

<style scoped>
canvas {
  border: 1px solid black;
  margin-top: 20px;
}
</style>
